import React, {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom'
import axios from 'axios'
import { Spin, Row, Col, DatePicker, Divider, Typography, Anchor, Menu, Button } from 'antd'
import { Header, Footer, ProductIntro, ProductComment } from '../../components'
import style from './Detail.module.css'
import { commentMockData } from './mockup'
// slice
import { productDetailSlice, getProductDetail } from '../../redux/productDetail/slice'
import { useSelector } from '../../redux/hooks'
import { useDispatch } from 'react-redux'
import { MainLayout } from '../../layouts/mainLayout'
import {ShoppingCartOutlined } from '@ant-design/icons'
import { addShoppingCartItem } from '../../redux/shoppingCart/slice'

const { RangePicker } = DatePicker;

export const Detail: React.FC = () => {
  const { id } = useParams()

  // const [loading, setLoading] = useState<boolean>(true)
  // const [product, setproduct] = useState<any>(null)
  // const [errorTest, setError] = useState<unknown>(null)

  const loading = useSelector(state => state.productDetail.loading)
  const error = useSelector(state => state.productDetail.error)
  const product = useSelector(state => state.productDetail.data)
  
  const jwt = useSelector(s => s.user.token) as string
  const shoppingCartLoading = useSelector(s => s.shoppingCart.loading)

  // 通过useDispatch取得dispatch函数
  const dispatch = useDispatch()
  // action是从slice中来的

  // 进入页面触发一次,第二个参数设置为空数组
  useEffect(() => {
    // console.log(params, 'params')
    dispatch(getProductDetail(id))
  }, [])
  if (loading) {
    return <Spin
      size="large"
      style={{
        marginTop: 200,
        marginBottom: 200,
        marginLeft: "auto",
        marginRight: "auto",
        width: "100%"
      }}
    ></Spin>
  }
  return (
    <>
    <MainLayout>
      {/* <Header></Header>
      <div className={style['page-content']}> */}
        {/* 产品简介 与 日期选择 */}
        <div className={style['product-intro-container']}>
          <Row>
            <Col span={13}>
              <ProductIntro
                title={product.title}
                shortDescription={product.shortDescription}
                price={product.price}
                coupons={product.coupons}
                points={product.points}
                discount={product.discount}
                rating={product.rating}
                pictures={product.touristRoutePictures.map(p => p.url)}></ProductIntro>
            </Col>
            <Col span={11}>
              <Button 
                danger 
                type='primary'
                loading={shoppingCartLoading}
                onClick={() => {
                  dispatch(addShoppingCartItem)
                }}
              ><ShoppingCartOutlined></ShoppingCartOutlined> 添加购物车</Button>
              <RangePicker open style={{marginTop: 20}} />
            </Col>
          </Row>
        </div>
        {/* 锚点菜单 */}
        <Anchor className={style['product-detail-anchor']}>
          <Menu mode='horizontal'>
            <Menu.Item key={1}>
              <Anchor.Link href='#feature' title="产品特色"></Anchor.Link>
            </Menu.Item>
            <Menu.Item key={2}>
              <Anchor.Link href='#fees' title="费用"></Anchor.Link>
            </Menu.Item>
            <Menu.Item key={3}>
              <Anchor.Link href='#notes' title="预定须知"></Anchor.Link>
            </Menu.Item>
            <Menu.Item key={4}>
              <Anchor.Link href='#comments' title="用户评价"></Anchor.Link>
            </Menu.Item>
          </Menu>
        </Anchor>
        {/* 产品特色 */}
        <div id='feature' className={style['product-detail-container']}>
          {/* orientation对齐方式 */}
          <Divider orientation='center'>
            <Typography.Title level={3}>产品特色</Typography.Title>
            <div dangerouslySetInnerHTML={{__html: product.feature}}></div>
          </Divider>
        </div>
        {/* 费用 */}
        <div id='fees' className={style['product-detail-container']}>
          <Divider orientation='center'>
            <Typography.Title level={3}>产品费用</Typography.Title>
            <div dangerouslySetInnerHTML={{__html: product.fees}}></div>
          </Divider>
        </div>
        {/* 预订须知 */}
        <div id='notes' className={style['product-detail-container']}>
        <Divider orientation='center'>
            <Typography.Title level={3}>预订须知</Typography.Title>
            <div dangerouslySetInnerHTML={{__html: product.notes}}></div>
          </Divider>
        </div>
        {/* 商品评价 */}
        <div id='comments' className={style['product-detail-container']}>
          <Divider orientation='center'>
            <Typography.Title level={3}>商品评价</Typography.Title>
          </Divider>
          <div style={{margin: 40}}>
            <ProductComment data={commentMockData}></ProductComment>
          </div>
        </div>
        {/* <h1>详情{params.id}</h1> */}
      {/* </div>
      <Footer></Footer> */}
      </MainLayout>
    </>
  )
}
